<template>
	<div class="simple">
		<img class="title-img" src="@/assets/image/softArticlePromotion/img／tab04／chooseUsPart／comb_title／red@2x.png"
			alt="" />
		<p class="disc mt-20" style="color: #808080;text-align: center;">
			我们拥有丰富的媒体资源和专业的软文策划团队，同时还有专业SEO团队辅助投放效果，精准把握目标受众的需求和兴趣点，为您量身定制高质量、有吸引力的软文内容，优秀的投放策略让您的品牌信息快速传播，轻松吸引目标受众的关注和认可。
		</p>
		<div class="swipper-content">
			<div class="swipper-left-mask"></div>
			<div class="swipper-handle">
  <div
          class="swipper-left-arrow swipper-arrow"
          @click="changeSwipper('left')"
        >
          <el-icon>
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div
          class="swipper-right-arrow swipper-arrow"
          @click="changeSwipper('right')"
        >
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </div>
</div>
			<div class="swipper-item-outer" ref="swipperRef" style="left: -160px">
				<div class="swipper-item" v-for="(item, index) in [...carouselList]" :key="index">
					<div class="logo-img">
						<img  class="logo-images" :src="item.img" alt=""  style="width: 100%;height: 100%;"/>
						<div @click="handleOpenChat" class="button-outer">
							<el-button class="learn-more">了解更多</el-button>
						</div>
					</div>
					<img class="swipper-title-img mt-36" :src="item.titleImg" alt="" />
					<h3>{{ item.title }}</h3>
					<p class="swipper-item-disc">{{ item.disc }}</p>
				</div>
			</div>
			<div class="swipper-right-mask"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		ArrowLeftBold,
		ArrowRightBold
	} from "@element-plus/icons-vue";
	import {
		ref
	} from "vue";
	import img1 from "@/assets/image/softArticlePromotion/light1.webp";
	import img2 from "@/assets/image/softArticlePromotion/light2.webp";
	import img3 from "@/assets/image/softArticlePromotion/light3.webp";
	import img4 from "@/assets/image/softArticlePromotion/light4.webp";
	import img5 from "@/assets/image/softArticlePromotion/light5.webp";
	import titleImg1 from "@/assets/image/softArticlePromotion/img／tab04／chooseUsCard／text／assurance@2x.png";
	import titleImg2 from "@/assets/image/softArticlePromotion/img／tab04／chooseUsCard／text／service@2x.png";
	import titleImg3 from "@/assets/image/softArticlePromotion/img／tab04／chooseUsCard／text／monitor@2x.png";
	import titleImg4 from "@/assets/image/softArticlePromotion/img／tab04／chooseUsCard／text／coverage@2x.png";
	import titleImg5 from "@/assets/image/softArticlePromotion/img／tab04／chooseUsCard／text／fast@2x.png";

	import EventBus from "@/utils/eventBus.js";

	const getUrl = (url) => {
		return new URL(url, import.meta.url).href;
	};
    const handleOpenChat = (e) => {
		EventBus.emit("openCustomerChat", {
			message: "您好，我想了解更多关于软文推广的内容"
		});
	};
	const carouselList = ref([
        {
			img: img3,
			titleImg: titleImg5,
			title: "软文发布快速",
			disc: "合作媒体在线收稿，通过微信公众号实时提醒，确保稿件极速投放",
		},
		{
			img: img1,
			titleImg: titleImg1,
			title: "效果实时保障",
			disc: "软文依据发布大数据，推荐媒体综合收录率90%以上",
		},
		{
			img: img5,
			titleImg: titleImg2,
			title: "专业高效服务",
			disc: "100+传播顾问服务超30W+企业，不同行业投放策略",
		},
		{
			img: img4,
			titleImg: titleImg3,
			title: "实时监测",
			disc: "实时监测让您清晰了解SEO优化排名效果及费用支出情况，用户可随时查看关键词排名的实时数据，方便快捷。",
		},
		{
			img: img2,
			titleImg: titleImg4,
			title: "效果覆盖广阔",
			disc: "采用新闻传播模式进行推广可以产生频繁的新闻曝光率。另外，大量地域媒体，可以根据您的地域需求，发布辐射到各行业的精准媒体上！",
		},
		// {
		// 	img: img1,
		// 	titleImg: titleImg2,
		// 	title: "效果实时保障",
		// 	disc: "软文依据发布大数据，推荐媒体综合收录率90%以上",
		// },
	]);
	const swipperRef = ref();
	const curIndex = ref(3);
	const changeSwipper = (flag) => {
		if (flag === "left") {
			curIndex.value--;
			swipperRef.value.style.transition = "all .5s";
			swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
			//点击时index自增
			if (curIndex.value <= 3) {
				curIndex.value = 3;
				setTimeout(() => {
                    let last = carouselList.value.pop();
                    carouselList.value.unshift(last)
					swipperRef.value.style.transition = "none";
                    swipperRef.value.style.left =  -160 + (3 - curIndex.value) * 460 + "px";
				}, 500); //定时器时间设置为500毫秒，与过渡时间相等
			}
		} else {
			curIndex.value++;
			swipperRef.value.style.transition = "all .5s";
			swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
			if (curIndex.value >= carouselList.value.length - 2) {
                curIndex.value = carouselList.value.length - 2
				setTimeout(() => {
                    let last = carouselList.value.shift();
                    carouselList.value.push(last)
					swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
					swipperRef.value.style.transition = "none";
				}, 500); //定时器时间设置为500毫秒，与过渡时间相等
			}
		}
        console.log(curIndex.value);
		console.log(swipperRef.value.style.left);
	};
</script>

<style lang="scss" scoped>
	.simple {
		width: 100%;
		height: 1239px;
		background: #2e2e2e;
		border-radius: 0px 0px 0px 0px;
		padding-top: 88px;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		z-index: 1;

		.title-img {
			width: $aiseoHomeWidth;
			margin: 0 auto;
			display: block;
		}

		.disc {
			width: $aiseoHomeWidth;
			font-family: Alibaba PuHuiTi-Regular;
			font-weight: 400;
			font-size: 20px;
			color: #e6e6e6;
			line-height: 32px;
			margin: 0 auto;
			letter-spacing: 0.7px;
		}

		.swipper-content {
			max-width: 1920px;
    		margin: 0 auto;
			height: 879px;
			margin-top: 80px;
			position: relative;
			overflow: hidden;
			&:hover{
				.swipper-arrow{
					display: block;
				}
			}

			.swipper-left-mask {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				width: 480px;
				height: 879px;
				background: linear-gradient(90deg,
						#2e2e2e 0%,
						rgba(46, 46, 46, 0.6) 50%,
						rgba(46, 46, 46, 0) 100%);
			}

			.swipper-right-mask {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
				width: 480px;
				height: 879px;
				background: linear-gradient(90deg,
						rgba(46, 46, 46, 0) 0%,
						rgba(46, 46, 46, 0.6) 50%,
						#2e2e2e 100%);
			}

			.swipper-item-outer {
				display: flex;
				position: absolute;
				transition: all 0.3;

				.swipper-item {
					width: 400px;
					position: relative;

					&:hover {
						.logo-images{
							border: 2px solid #ffffff;
							border-radius: 15px;
							box-sizing: border-box;
						}
						.logo-img{
							.button-outer {
							opacity:1 ;
							bottom: 40px;
								transition: all 0.3s ease; 
							display: flex;
						}
						}
						.swipper-item-disc{
							color: #ffffff !important;
						}
					}

					&+.swipper-item {
						margin-left: 60px;
					}

					.logo-img {
						width: 400px;
						height: 600px;
						border-radius: 12px;
						position: relative;


						.button-outer {
							position: absolute;
							bottom: 0px;
							left: 50%;
							transform: translate(-50%);
							z-index: 3;
							width: 218px;
							height: 57px;
							border-radius: 30px;
							display: flex;
							opacity: 0;
							align-items: center;
							justify-content: center;
							transition: all 0.5s;
							box-sizing: border-box;

							.learn-more {
								width: 170px;
								height: 49px;
								border-radius: 29px;
								border: 2px solid #ffffff;
								background: none;
								font-weight: 300;
								font-size: 18px;
								color: #ffffff;
								transition: all 0.5s;
								box-sizing: border-box;
							}

							&:hover {
								border: 2px solid #e62e3d;
								padding: 2px;
								transition: all 0.5s;

								.learn-more {
									background: #e62e3d;
									border: none;
									width: 208px;
									transition: all 0.5s;
								}
							}
						}
					}
					.swipper-item-disc{
						font-size: 16px;color: #7C7C7C;
					}
                    .swipper-title-img{
                        height: 27px;
                    }

					.title-img {
						height: 27px;
					}

					h3 {
						font-family: Alibaba PuHuiTi-Regular;
						font-weight: bold;
						font-size: 24px;
						line-height: 24px;
						color: #ffffff;
					}

					p {
						width: 300px;
						font-family: Alibaba PuHuiTi-Regular;
						font-weight: 400;
						font-size: 16px;
						color: #ffffff;
						line-height: 28px;
						margin-top: 16px;
					}
				}
			}

			.swipper-handle{
			width: 1000px;
			position: absolute;
			top: 290px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			z-index: 3;
			}

			.swipper-arrow {
			display: none;
			z-index: 3;
			font-size: 32px;
			line-height: 56px;
			text-align: center;
			color: #ffffff;
			cursor: pointer;
			border-radius: 12px 12px 12px 12px;
			border: 4px solid #ffffff;
			width: 56px;
			height: 56px;
			// position: absolute;
			// top: 290px;
			box-sizing: border-box;

			&:hover {
				border: 0;
				background: #e62e3d;
				line-height: 64px;
			}
			}
		}
	}
</style>